<template>
  <div class="homepage">
    <el-container>
      <el-aside class="sider" :width="expanding ? '180px' : '64px'">
        <img src="../../assets/imgs/logo.png" alt="">
        <side-nav :expanding="expanding" />
        <img src="../../assets/imgs/leftnavBg.png" alt="">
      </el-aside>
      <el-container>
        <el-header class="header">
          <head-nav
            :title="HEADER_TITLE"
            :version="PROJECT_VERSION"
            :username="username"
            :expanding="expanding"
            @onExpand="expanding = !expanding"
          />
        </el-header>
        <el-main class="container">
          <keep-alive>
            <router-view />
          </keep-alive>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import SideNav from '../../components/side-nav';
import HeadNav from '../../components/head-nav';
import {
  HEADER_TITLE,
  PROJECT_VERSION,
} from '../../constants/conf';
import { mapState } from 'vuex';

export default {
  components: {
    SideNav,
    HeadNav,
  },
  data () {
    return {
      HEADER_TITLE,
      PROJECT_VERSION,
      expanding: true,
    };
  },
  computed: {
    ...mapState('user', ['username']),
  },
}
</script>

<style scoped>
  @import url('./index.css');
</style>
